<template>
  <view class="Top">
    <view class="Top-top">
      <view class="Top-top-left">
        <uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
      </view>
      <view class="Top-top-right">
        <uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="inpValue" :placeholder="inpPlaceholder"
          @iconClick="iconClick"></uni-easyinput>
      </view>
      <view class="Top-top-text" v-if="ISzhaofang">
        <text @click="OpenDitu">地图找房</text>
      </view>
    </view>
    <view class="Top-con">
      <view class="Top-con-item" v-for="(item, index) in fangTab" :key="index" @click="TabFang(index)">
        <image :src="item.img" mode="" />
        <text :class="index === TabIndex ? 'on' : ''">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
// 下拉菜单默认显示下标
const value = ref(0);
// 下拉菜单数据
const range = reactive([
  { value: 0, text: "北京" },
  { value: 1, text: "上海" },
  { value: 2, text: "天津" },
  { value: 2, text: "重庆" },
]);
// 头部tab切换的高亮下标
const TabIndex = ref(0);
const ISzhaofang = ref(false);
// tab切换数据
const fangTab = reactive([
  {
    img: 'http://10.31.71.52:7002/public/static/map/三层别墅.png',
    text: '买房'
  },
  {
    img: 'http://10.31.71.52:7002/public/static/map/别墅.png',
    text: '租房'
  }
]);

// input输入框双向绑定数据
const inpValue = ref('');
// input输入框占位符
const inpPlaceholder = ref('请在这里输入区域/商圈');
// 下拉框触发的change事件
const change = (e) => {
  console.log(e);
};

// input的图标点击事件
const iconClick = (type) => {
  uni.showToast({
    title: `点击了${type === 'prefix' ? '左侧' : '右侧'}的图标`,
    icon: 'none'
  })
};
// 头部tab点击事件
const TabFang = (index) => {
  TabIndex.value = index;
  ISzhaofang.value = !ISzhaofang.value
};
// onShow(() => {

// });
const OpenDitu = () => {
  uni.getLocation({
    geocode: true,
    type: 'wgs84',
    success: (res) => {
      console.log(res, '获取当前位置')
      uni.chooseLocation({
        longitude: res.longitude,
        latitude: res.latitude
      })
    },
    address: (res) => {
      console.log('address', res)
    }
  })
}
</script>
<style scoped lang="scss">
.Top {
  width: 100%;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .Top-top {
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;

    .Top-top-left {
      width: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .text {
        font-size: 12px;
        color: #666;
        margin-top: 5px;
      }

      .uni-px-5 {
        padding-left: 10px;
        padding-right: 10px;
      }

      .uni-pb-5 {
        padding-bottom: 10px;
      }
    }

    .Top-top-right {
      width: 60%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .Top-top-text {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

  }

  .Top-con {
    width: 100%;
    height: 50%;
    display: flex;

    .Top-con-item {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .on {
        color: red;
      }

      image {
        width: 45%;
        height: 90%;
      }
    }

  }


}
</style>